<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthHub - 您的健康管理助手</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <!-- 引入一些字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 主容器 - 模拟手机屏幕 -->
    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden">
        <!-- 顶部状态栏 -->
        <div class="bg-primary text-white p-4 flex justify-between items-center">
            <div class="flex items-center">
                <span class="font-bold text-xl">HealthHub</span>
            </div>
            <div class="flex items-center space-x-3">
                <i class="fas fa-bell"></i>
                <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&h=100" 
                         alt="用户头像" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- 健康数据概览 -->
        <div class="p-4">
            <h2 class="text-lg font-semibold mb-3">今日健康概览</h2>
            
            <!-- 健康指标卡片集 -->
            <div class="grid grid-cols-2 gap-3 mb-6">
                <!-- 步数卡片 -->
                <div class="bg-blue-50 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-blue-500 font-medium text-sm">步数</p>
                            <p class="text-2xl font-bold">7,245</p>
                        </div>
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-shoe-prints text-blue-500"></i>
                        </div>
                    </div>
                    <div class="mt-2 text-sm text-gray-500">目标: 10,000 步</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                        <div class="bg-blue-500 h-1.5 rounded-full" style="width: 72%"></div>
                    </div>
                </div>

                <!-- 睡眠卡片 -->
                <div class="bg-indigo-50 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-indigo-500 font-medium text-sm">睡眠</p>
                            <p class="text-2xl font-bold">7.5h</p>
                        </div>
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-moon text-indigo-500"></i>
                        </div>
                    </div>
                    <div class="mt-2 text-sm text-gray-500">睡眠质量: 良好</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                        <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 85%"></div>
                    </div>
                </div>

                <!-- 热量卡片 -->
                <div class="bg-orange-50 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-orange-500 font-medium text-sm">热量</p>
                            <p class="text-2xl font-bold">1,450</p>
                        </div>
                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-fire text-orange-500"></i>
                        </div>
                    </div>
                    <div class="mt-2 text-sm text-gray-500">目标: 2,000 卡</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                        <div class="bg-orange-500 h-1.5 rounded-full" style="width: 65%"></div>
                    </div>
                </div>

                <!-- 水分卡片 -->
                <div class="bg-cyan-50 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-cyan-500 font-medium text-sm">饮水量</p>
                            <p class="text-2xl font-bold">1.2L</p>
                        </div>
                        <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-glass-water text-cyan-500"></i>
                        </div>
                    </div>
                    <div class="mt-2 text-sm text-gray-500">目标: 2.0L</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                        <div class="bg-cyan-500 h-1.5 rounded-full" style="width: 60%"></div>
                    </div>
                </div>
            </div>

            <!-- 今日健康提示 -->
            <div class="bg-gradient-to-r from-primary to-indigo-600 rounded-xl p-4 text-white mb-6 shadow-md">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-lightbulb text-yellow-300"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold">今日健康提示</h3>
                        <p class="text-sm opacity-90 mt-1">久坐伤身！建议每工作一小时站起来活动5分钟，促进血液循环。</p>
                        <button class="mt-2 text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full">了解更多</button>
                    </div>
                </div>
            </div>

            <!-- 健康计划 -->
            <h2 class="text-lg font-semibold mb-3">今日计划</h2>
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
                <!-- 计划项目1 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="flex items-center justify-between">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-dumbbell text-green-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">30分钟核心力量训练</h4>
                                <p class="text-sm text-gray-500">09:00 - 09:30</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-600 mr-2">已完成</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                </div>

                <!-- 计划项目2 -->
                <div class="p-4 border-b border-gray-100 bg-gray-50">
                    <div class="flex items-center justify-between">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-apple-whole text-blue-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">健康午餐</h4>
                                <p class="text-sm text-gray-500">12:00 - 13:00</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-600 mr-2">进行中</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                </div>

                <!-- 计划项目3 -->
                <div class="p-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-person-walking text-purple-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">晚间散步5公里</h4>
                                <p class="text-sm text-gray-500">18:30 - 19:30</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600 mr-2">未开始</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 健康资讯 -->
            <h2 class="text-lg font-semibold mb-3">热门健康资讯</h2>
            <div class="space-y-4 mb-8">
                <!-- 资讯卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-50">
                    <div class="h-32 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?auto=format&fit=crop&w=500" 
                             alt="健康饮食" class="w-full h-full object-cover">
                    </div>
                    <div class="p-3">
                        <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-600">饮食健康</span>
                        <h3 class="font-medium text-base mt-2">地中海饮食如何帮助降低心脏病风险</h3>
                        <p class="text-sm text-gray-500 mt-1 line-clamp-2">最新研究表明，坚持地中海饮食模式可以显著降低心血管疾病风险，同时改善认知功能...</p>
                        <div class="flex justify-between items-center mt-3">
                            <span class="text-xs text-gray-400">2小时前</span>
                            <button class="text-xs text-primary">阅读更多</button>
                        </div>
                    </div>
                </div>

                <!-- 资讯卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-50">
                    <div class="h-32 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=500" 
                             alt="冥想训练" class="w-full h-full object-cover">
                    </div>
                    <div class="p-3">
                        <span class="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-600">心理健康</span>
                        <h3 class="font-medium text-base mt-2">每天10分钟冥想如何改变你的大脑</h3>
                        <p class="text-sm text-gray-500 mt-1 line-clamp-2">神经科学研究证实，短时间的日常冥想可以增强大脑前额叶皮质，改善注意力和情绪调节能力...</p>
                        <div class="flex justify-between items-center mt-3">
                            <span class="text-xs text-gray-400">昨天</span>
                            <button class="text-xs text-primary">阅读更多</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-6 py-2">
            <div class="flex justify-between items-center">
                <a href="#" class="flex flex-col items-center text-primary">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-chart-line text-xl"></i>
                    <span class="text-xs mt-1">数据</span>
                </a>
                <div class="relative -mt-5">
                    <button class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center shadow-lg text-white">
                        <i class="fas fa-plus text-xl"></i>
                    </button>
                </div>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-users text-xl"></i>
                    <span class="text-xs mt-1">社区</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>

    </div>
</body>
</html> 